<?php
/**
 * Created by PhpStorm.
 * User: hgq
 * Date: 16/3/14
 * Time: 下午5:43
 */
use \yii\helpers\Url;

$web = Url::to('@web');
?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>收货信息</title>

    <link type="text/css" href="<?= $web ?>/css/wx-good/global.css" rel="stylesheet"/>
    <link type="text/css" href="<?= $web ?>/css/wx-good/rece_address.css" rel="stylesheet"/>

    <script type="text/javascript" src="<?= $web ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $web ?>/js/tools.js"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            var w = $(window).width();
            if (w > 640) {
                w = 640;
            }
            $("html").css("font-size", w * 20 / 320);
        });

        $order_type = <?=json_encode($order_type)?>;
        $goods_code = <?=json_encode($goods_code)?>;

        function getAreaOther(parent_id) {
            var data = {};
            data.parent_id = parent_id;
            var re = requestJson("<?=Url::to(["wx-good/get-area-handle"])?>", data);
            if (re.status == 0) {
                return re.data.others;
            } else {
                alert(re.message);
            }
        }

        $(function ($) {
            var sheng_lable = "省";
            var shi_lable = "市";
            var qu_lable = "区";
            var default_sheng = '<option selected="" value="">{0}</option>'._format(sheng_lable);
            var default_shi = '<option selected="" value="">{0}</option>'._format(shi_lable);
            var default_qu = '<option selected="" value="">{0}</option>'._format(qu_lable);
            $("#sel_sheng").html(default_sheng);
            $("#sel_shi").html(default_shi);
            $("#sel_qu").html(default_qu);
            var shengs = getAreaOther(null);

            if (shengs != false) {
                $.each(shengs, function (i, item) {
                    $("#sel_sheng").append("<option  value='" + item.ID + "'>" + item.NAME + "</option>");
                });
                $("#sel_sheng").val(null);
            }

            $("#sel_sheng").change(function () {
                var me = $(this);
                $("#sel_shi").html(default_shi);
                $("#sel_qu").html(default_qu);
                var shis = getAreaOther(me.val());
                if (shis != false) {
                    $.each(shis, function (i, item) {
                        $("#sel_shi").append("<option value='" + item.ID + "'>" + item.NAME + "</option>");
                    });
                    $("#sel_shi").val(null);
                }
            });

            $("#sel_shi").change(function () {
                var me = $(this);
                $("#sel_qu").html(default_qu);
                var shis = getAreaOther(me.val());
                if (shis != false) {
                    $.each(shis, function (i, item) {
                        $("#sel_qu").append("<option value='" + item.ID + "'>" + item.NAME + "</option>");
                    });
                    $("#sel_qu").val(null);
                }
            });


            $("#btn_exec").click(function () {
                var data = {};
                data.rece_name = $('#txt_name').val();
                data.rece_phone = $('#txt_phone').val();
                data.rece_address = $('#txt_address').val();
                data.sheng = $("#span_sheng").text();
                data.shi = $("#span_shi").text();
                data.qu = $("#span_qu").text();

                if (data.sheng == sheng_lable) {
                    alert("省必须填写!");
                    return;
                }
                if (data.shi == shi_lable) {
                    alert("市必须填写!");
                    return;
                }
                if (data.qu == qu_lable) {
                    alert("区必须填写!");
                    return;
                }

                if (data.rece_name._trim() == '') {
                    alert("我的姓名必须填写!");
                    return;
                }
                if (data.rece_phone._trim() == '') {
                    alert("手机号码必须填写!");
                    return;
                } else {
                    if (checkMobile(data.rece_phone._trim()) == false) {
                        alert("请填写正确手机号!");
                        return;
                    }
                }
                if (data.rece_address._trim() == '') {
                    alert("详细地址必须填写!");
                    return;
                }

                //保存地址
                var re = requestJson("<?=Url::to(["wx-good/save-user-address-handle"])?>", data);
                if (re.status == 0) {
                    //地址保存成功 跳转至订单确认页面
                    if ($order_type == 1) {
                        window.location.href = "<?=Url::to(["wx-good/create-cart-to-order-handle"]);?>";
                    } else if ($order_type == 2) {
                        window.location.href = "<?=Url::to(["wx-good/create-goods-to-order-handle"]);?>?goods_code=" + $goods_code;
                    }
                } else {
                    alert(re.message);
                }
            });
        });


        $(function ($) {
            var rece = <?=json_encode($receiver)?>;
            if ( rece.length>0) {

                var shis_shi = getAreaOther(rece[0]['PROVINCE_ID']);
                if (shis_shi != false) {
                    $.each(shis_shi, function (i, item) {
                        $("#sel_shi").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                    $("#sel_shi").val(null);
                }

                var shis_qu = getAreaOther(rece[0]['CITY_ID']);
                if (shis_qu != false) {
                    $.each(shis_qu, function (i, item) {
                        $("#sel_qu").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                    $("#sel_qu").val(null);
                }

                $("#sel_sheng").parent().children("span").html(rece[0]['PROVINCE']);
                $("#sel_shi").parent().children("span").html(rece[0]['CITY']);
                $("#sel_qu").parent().children("span").html(rece[0]['REGION']);
                $('#txt_name').val(rece[0]['NAME']);
                $('#txt_phone').val(rece[0]['PHONE']);
                $('#txt_address').val(rece[0]['ADDRESS']);

            }
        });

    </script>
</head>
<body>
<div class="main" style="width: 16rem; margin: 0 auto;">
    <div class="demo">
        <input type="text" id="txt_name" placeholder="我的姓名" style="display: block; width: 100%; font-size: 0.7rem;
    font-weight: 500; height: 1.1rem; line-height: 1.2rem; color: #ccc; border: none; outline: none;">
    </div>
    <div class="demo">
        <input type="tel" id="txt_phone" placeholder="手机号码" style="display: block; width: 100%; font-size: 0.7rem;
    font-weight: 500; height: 1rem; line-height: 1.1rem; color: #ccc; border: none; outline: none;">
    </div>
    <div class="demo">
        <span id="span_sheng">省</span>
        <select id="sel_sheng" class="select" style="width: 100%; font-size: 0.7rem;
    font-weight: 500; height: 1.1rem; line-height: 1.2rem; color: #ccc; border: none;" onchange="">
            <option value="1">省</option>
        </select>
        <img src="<?= $web ?>/img/wx-good/receiving-information-1.jpg">
    </div>
    <div class="demo">
        <span id="span_shi">市</span>
        <select id="sel_shi" class="select" style="width: 100%; font-size: 0.7rem;
    font-weight: 500; height: 1.1rem; line-height: 1.2rem; color: #ccc; border: none;" onchange="">
            <option value="1">市</option>
        </select>
        <img src="<?= $web ?>/img/wx-good/receiving-information-1.jpg">
    </div>
    <div class="demo">
        <span id="span_qu">区</span>
        <select id="sel_qu" class="select" style="width: 100%; font-size: 0.7rem;
        font-weight: 500; height: 1.1rem; line-height: 1.2rem; color: #ccc; border: none;" onchange="">
            <option value="1">区</option>
        </select>
        <img src="<?= $web ?>/img/wx-good/receiving-information-1.jpg">
    </div>
    <script>
        $(".select").each(function (index) {
            $(this).change(function () {
                var a = $(this).find("option:selected").text();
                $(this).parent().children("span").html(a);

                var sheng_lable = "省";
                var shi_lable = "市";
                var qu_lable = "区";
                var default_sheng = '<option selected="" value="">{0}</option>'._format(sheng_lable);
                var default_shi = '<option selected="" value="">{0}</option>'._format(shi_lable);
                var default_qu = '<option selected="" value="">{0}</option>'._format(qu_lable);
                var selectedar = $(this).attr('id');
                if (selectedar == "sel_sheng") {
                    $("#sel_shi").html(default_shi);
                    $("#sel_qu").html(default_qu);
                    $("#sel_shi").parent().children("span").html(shi_lable);
                    $("#sel_qu").parent().children("span").html(qu_lable);
                } else if (selectedar == "sel_shi") {
                    $("#sel_qu").html(default_qu);
                    $("#sel_qu").parent().children("span").html(qu_lable);
                }
            })
        })
    </script>
    <div class="area">
        <textarea id="txt_address" placeholder="详细地址" style=" font-size: 0.7rem;
                  font-weight: 500;color: #ccc; outline: none;"></textarea>
    </div>
    <div class="foot" id="btn_exec">
        确认提交
    </div>
</div>
</body>
</html>